<template>
    <div>
        <div class="demonstration">疫苗预约申请</div>
        <el-divider><i style="font-size: 34px;color: #ff0000" class="iconfont icon-jiankang"></i></el-divider>
        <div style="width: 90%">
            <el-row :gutter="150">
                <el-col :span="10">
                    <div style="padding-left: 12%;">
                        <el-card class="box-card" :body-style="{ paddingLeft: '20px' }" shadow="hover"
                                 style="background-color: #ffffff">
                            <div style="width: 480px;height: 500px;overflow:auto">
                                <el-collapse accordion>
                                    <el-collapse-item title="疫苗类型" name="1">
                                        <div style="color: #008dff">
                                            <p>中国正在使用的新冠疫苗包含一针、两针、三针三种不同的类型。三种疫苗各自特点：</p>
                                            <p>
                                                只打一针的是腺病毒载体疫苗。通俗地说，腺病毒像货车一样，可以搭载新冠病毒核酸片段，将其高效地送到细胞内表达抗原，单针接种就可诱导免疫保护反应。</p>
                                            <p> 需要打两针的是灭活疫苗，这是大家熟悉的传统疫苗，它将活病毒灭活后作为抗原接种到人体，疫苗的成分和天然的病毒结构最接近。</p>
                                            <p>需要打三针的是重组蛋白疫苗，是将最有效的抗原成分通过基因工程的方法来制作成疫苗。尽管这三种疫苗类型不同，但都是安全和有效的。</p>
                                        </div>
                                    </el-collapse-item>
                                    <el-collapse-item title="接种须知" name="2">
                                        <div style="color: #ff0088">
                                            <p>①新冠疫苗接种年龄限制为18至59岁，其它年龄段人群需要等待进一步临床试验；</p>
                                            <p>②哺乳期妇女、药物不可控的高血压、糖尿病并发症等人员不适合接种；</p>
                                            <p>③推荐免疫程序为2针，其间至少间隔14天。</p>
                                            <p>④中国的疫苗是两剂，第一剂和第二剂间隔14天，部分地区21天；第二剂接种14天后，一共35天左右，才有较明显的保护作用。</p>
                                            <p>
                                                2021年4月，中国疾病预防控制中心专家就《“过敏体质”、备孕者能否接种新冠疫苗？》回应：新冠病毒疫苗过敏的比例不高，“过敏体质”、备孕者均可以接种。</p>
                                        </div>
                                    </el-collapse-item>

                                    <el-collapse-item title="接种禁忌" name="3">
                                        <div style="color: #008dff"><p>
                                            疫苗不宜接种的人群包括：孕妇、哺乳期妇女；处于发热期的人员；既往发生过疫苗接种严重过敏反应的人员；患有血小板减少症或出血性疾病者；惊厥、癫痫、脑病、其他进行性神经系统疾病和精神疾病史或家族史的患者；已被诊断为患有先天性或获得性免疫缺陷、HIV感染、淋巴瘤、白血病或其他自身免疫疾病的患者等。
                                            其他禁忌症还包括：严重的肝肾疾病、药物不可控制的高血压、糖尿病并发症、恶性肿瘤；各种急性疾病或慢性疾病急性发作期；严重呼吸系统疾病、严重心血管疾病等。
                                        </p></div>
                                    </el-collapse-item>
                                    <el-collapse-item title="儿童不能接种的情况" name="4">
                                        <div style="color: #ff0088">
                                            <p>儿童不能接种的情况主要有以下几个方面：</p>
                                            <p>（1）对新冠病毒疫苗或其成分过敏的；</p>
                                            <p> （2）以前接种同类疫苗时出现过敏者；</p>
                                            <p> （3）既往发生过其他疫苗严重过敏反应者（如急性过敏反应、血管神经性水肿、呼吸困难等）；</p>
                                            <p>（4）患有未控制的癫痫和其他严重神经系统疾病者（如横贯性脊髓炎、格林巴利综合征、脱髓鞘疾病等）；</p>
                                            <p>（5）正在发热者，或患急性疾病，或慢性疾病的急性发作期，或未控制的严重慢性病患者。</p>
                                            <p> 其他禁忌请按照说明书规定，受种对象或家长也可咨询接种医生。</p>
                                        </div>
                                    </el-collapse-item>
                                    <el-collapse-item title="三种疫苗怎么选" name="5">
                                        <div style="color: #008dff;overflow:auto"><p>
                                            中国正在使用的新冠疫苗包含一针、两针、三针三种不同的类型：分别腺病毒载体疫苗（只打一针），灭活疫苗(需打两针)和重组蛋白疫苗（需要打三针），疫苗接种的选择更加灵活多样。
                                            专家提醒，需紧急接种的人员一般选用一针的疫苗，其他人可以根据能够方便获取的疫苗类型以及自身的身体状况来选择。中国疾控中心研究员、世卫组织疫苗研发委员会顾问邵一鸣说：“体质比较弱、基础性疾病比较多的人，选择副反应低的疫苗类型，比如发烧比较少的蛋白疫苗或者灭活疫苗，就比选病毒载体疫苗mRNA疫苗更好一些。
                                        </p></div>
                                    </el-collapse-item>
                                    <el-collapse-item title="疫苗会不会对一再变异后的病毒没效果" name="6">
                                        <div style="color: #ff0088;overflow:auto"><p>
                                            中国疾控中心研究员、世卫组织疫苗研发委员会顾问邵一鸣说：“现有的变异株仅是中和抗体的程度下降，但仍然还是维持在50%以上的保护率，所以说现有的疫苗可以应付变异病毒，但是很重要的是大家要快一点接种，因为病毒的变异会继续发生，要想阻断它变异，防止完全能逃脱疫苗的免疫监视的变异株，我们就要阻断它传播，不给它机会继续去变异。”
                                        </p></div>
                                    </el-collapse-item>
                                </el-collapse>
                            </div>
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="10">
                    <div style="padding-left: 40%">
                        <el-card class="box-card" :body-style="{ paddingLeft: '30px' }" shadow="hover"
                                 style="background-color: #ffffff">
                            <div>
                                <!-- 列表区域 -->
                                <el-table stripe border :data="VaccineList.slice((currentPage-1)*pageSize,currentPage*pageSize)" max-height="350px">
                                    <el-table-column label="ID" prop="vid" min-width="50%"></el-table-column>
                                    <el-table-column label="疫苗名称" prop="vname"></el-table-column>
                                    <el-table-column label="接种时间" prop="vtime"></el-table-column>
                                    <el-table-column label="接种地点" prop="vaddress"></el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    type="danger"
                                                    plain
                                                    @click="getQueryInfo(scope.row.vid)">预约</el-button>
                                            <!--scope.$index→拿到每一行的index;scope.$row→拿到每一行的数据-->
                                        </template>
                                    </el-table-column>
                                </el-table>

                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                               :current-page="currentPage"
                                               small
                                               background
                                               :page-sizes="[3,5,7,10]" :page-size="pageSize"
                                               layout="total, sizes, prev, pager, next, jumper" :total="VaccineList.length">
                                </el-pagination>
                            </div>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        name: "vaccineApply",
        data() {
            return {
                VaccineList: [],
                queryInfo: {
                    userID:"",
                    vid:"",
                },
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 3,// 每页的数据条数
            }
        },
        created() {
            this.queryInfo.userID = window.sessionStorage.getItem('UUID')
            this.getAllVaccine()
        },
        methods: {
            async getAllVaccine() {
                const {data: res} = await this.$http.get("getAllVaccine");
                this.VaccineList = res.VaccineList;
            },
            async getQueryInfo(vid){
                this.queryInfo.vid = vid;
                /*this.$options.methods.ApplyVaccine();*///在一个方法中调用另一个方法
                const {data: res} = await this.$http.post("ApplyVaccine", this.queryInfo);
                console.log(res);
                if (res === "ok") {
                    this.$message.success("预约成功");
                    /*this.$router.go(0)*/
                } else {
                    this.$message.error("预约失败");
                }
            },
           /* async ApplyVaccine() {
                const {data: res} = await this.$http.get("ApplyVaccine" + this.queryInfo);
                console.log(res);
                if (res === "ok") {
                    this.$message.success("预约成功");
                    this.$router.go(0)
                } else {
                    this.$message.error("预约失败");
                }
            },*/

            /* 分页功能的实现 */
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
        }
    }
</script>

<style scoped>
    .demonstration {
        font-size: 25px;
        display: flex;
        font-weight: bold;
        color: #02ff89;
        padding-top: 20px;
        width: 150px;
        margin: 0 auto;
    }

    .el-card {
        font-weight: bold;
        height: 430px;
        width: 520px;
        margin: 0 auto;
    }
    /*折叠板样式*/
    /deep/.el-collapse-item__header{
        background-color: #ffffff;
        font-size: 16px;
        color: #ff4e4e;
    }

</style>